<template>
	<div>
		<el-row :gutter="20">
			<el-col :lg="8" :xl="8" style="margin-bottom: 17px">
				<div class="padding10 tree" :style="{ height: leftTreeHeight + 'px' }">
					<el-input
						placeholder="输入关键字进行过滤"
						v-model="leftTreeFilterText"
						clearable
						style="margin-bottom: 10px"
					></el-input>
					<el-tree
						class="filter-tree"
						:data="leftTreeData"
						:props="defaultProps"
						default-expand-all
						:filter-node-method="leftTreeFilterNode"
						highlight-current
						ref="tree"
						@node-click="chooseLeftTree"
					></el-tree>
				</div>
			</el-col>
			<el-col :lg="16" :xl="16">
				<div class="padding10">
					<el-form :inline="true" :model="queryForm" @submit.native.prevent @keyup.enter.native="queryList">
						<el-form-item>
							<el-input
								prefix-icon="el-icon-search"
								v-model="queryForm.id"
								autocomplete="off"
								placeholder="请输入主键"
								clearable
							></el-input>
						</el-form-item>

						<el-form-item>
							<el-input
								prefix-icon="el-icon-search"
								v-model="queryForm.title"
								autocomplete="off"
								placeholder="请输入标题"
								clearable
							></el-input>
						</el-form-item>

						<el-form-item v-show="collapse.flag">
							<el-input
								prefix-icon="el-icon-search"
								v-model="queryForm.author"
								autocomplete="off"
								placeholder="请输入作者"
								clearable
							></el-input>
						</el-form-item>

						<el-form-item v-show="collapse.flag">
							<el-input
								prefix-icon="el-icon-search"
								v-model="queryForm.keywords"
								autocomplete="off"
								placeholder="请输入关键字"
								clearable
							></el-input>
						</el-form-item>

						<el-form-item v-show="collapse.flag">
							<el-input
								prefix-icon="el-icon-search"
								v-model="queryForm.publisher"
								autocomplete="off"
								placeholder="请输入发布人"
								clearable
							></el-input>
						</el-form-item>

						<el-form-item v-show="collapse.flag">
							<fortress-select
								v-model="queryForm.status"
								:dictList="ArticleStatus_cmsList"
								placeholder="请选择状态"
								clearable
								filterable
							></fortress-select>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" size="medium" icon="el-icon-search" @click="queryList({ current: 1 })">
								查询
							</el-button>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" size="medium" icon="el-icon-refresh-left" @click="resetQueryForm">重置</el-button>
						</el-form-item>
						<el-form-item>
							<el-button type="text" @click="handleCollapseState">
								{{ collapse.label }}
								<i :class="collapse.icon"></i>
							</el-button>
						</el-form-item>
					</el-form>
					<div style="float: right; padding-right: 17px">
						<i class="el-icon-download" style="margin-right: 10px; cursor: pointer" @click="handleExport"></i>
						<i class="el-icon-refresh" style="margin-right: 10px; cursor: pointer" @click="refresh"></i>

						<el-popover placement="bottom" width="180" trigger="click" title="列展示" popper-class="columnShows">
							<el-checkbox-group v-model="tableShowList">
								<el-checkbox v-for="item in tableList" :label="item.propName" :key="item.propName" :value="item.propName">
									{{ item.propDesc }}
								</el-checkbox>
							</el-checkbox-group>
							<i slot="reference" class="el-icon-s-operation" style="cursor: pointer"></i>
						</el-popover>
					</div>
					<!-- loading -->
					<loading :show="parentShow">
						<el-table ref="multipleTable" :data="tableData" style="width: 100%; margin-bottom: 20px" row-key="id" border>
							<el-table-column type="selection" width="55" show-overflow-tooltip></el-table-column>

							<el-table-column
								v-if="$tools.isShow('id', tableShowList)"
								prop="id"
								label="主键"
								:show-overflow-tooltip="true"
							></el-table-column>
							<el-table-column
								v-if="$tools.isShow('title', tableShowList)"
								prop="title"
								label="标题"
								:show-overflow-tooltip="true"
							></el-table-column>
							<el-table-column
								v-if="$tools.isShow('author', tableShowList)"
								prop="author"
								label="作者"
								:show-overflow-tooltip="true"
							></el-table-column>
							<el-table-column
								v-if="$tools.isShow('source', tableShowList)"
								prop="source"
								label="来源"
								:show-overflow-tooltip="true"
							></el-table-column>
							<el-table-column
								v-if="$tools.isShow('info', tableShowList)"
								prop="info"
								label="摘要"
								:show-overflow-tooltip="true"
							></el-table-column>
							<el-table-column
								v-if="$tools.isShow('keywords', tableShowList)"
								prop="keywords"
								label="关键字"
								:show-overflow-tooltip="true"
							></el-table-column>
							<el-table-column
								v-if="$tools.isShow('picname', tableShowList)"
								prop="picname"
								label="缩略图"
								:show-overflow-tooltip="true"
							>
								<template slot-scope="scope">
									<el-image
										v-if="scope.row.picname"
										:src="scope.row.picname"
										style="width: 100px; height: 100px"
										:preview-src-list="[scope.row.picname]"
									/>
								</template>
							</el-table-column>
							<el-table-column
								v-if="$tools.isShow('publisher', tableShowList)"
								prop="publisher"
								label="发布人"
								:show-overflow-tooltip="true"
							></el-table-column>
							<el-table-column
								v-if="$tools.isShow('pubdate', tableShowList)"
								prop="pubdate"
								label="发布时间"
								:show-overflow-tooltip="true"
							></el-table-column>
							<el-table-column
								v-if="$tools.isShow('url', tableShowList)"
								prop="url"
								label="访问地址"
								:show-overflow-tooltip="true"
							></el-table-column>
							<el-table-column
								v-if="$tools.isShow('click', tableShowList)"
								prop="click"
								label="浏览次数"
								:show-overflow-tooltip="true"
							></el-table-column>
							<el-table-column
								v-if="$tools.isShow('sort', tableShowList)"
								prop="sort"
								label="权重排序"
								:show-overflow-tooltip="true"
							></el-table-column>
							<el-table-column
								v-if="$tools.isShow('status', tableShowList)"
								prop="status"
								label="状态"
								:show-overflow-tooltip="true"
								:formatter="statusFmt"
							></el-table-column>
							<el-table-column
								v-if="$tools.isShow('channelId', tableShowList)"
								prop="channelIdName"
								label="栏目"
								:show-overflow-tooltip="true"
							></el-table-column>
							<el-table-column label="操作" fixed="right" min-width="180">
								<template slot-scope="scope">
									<el-button
										v-if="$tools.hasPermission('cms:cmsArticle:info')"
										size="mini"
										plain
										@click="handleInfo(scope.row.id)"
									>
										详情
									</el-button>
									<el-button
										v-if="$tools.hasPermission('cms:cmsArticle:audit') && scope.row.status == 1"
										size="mini"
										plain
										@click="$router.push('/cms/cmsarticle-audit-edit-new?id=' + scope.row.id)"
									>
										审核
									</el-button>
									<!-- <el-button
										v-if="$tools.hasPermission('cms:cmsArticle:audit') && scope.row.status == 1"
										size="mini"
										plain
										@click="handleEdit(scope.row)"
									>
										审核
									</el-button> -->
								</template>
							</el-table-column>
						</el-table>
					</loading>
					<pagination
						:total="page.total"
						:current-page="page.current"
						:page-size="page.size"
						@refreshData="queryList"
					></pagination>
					<!-- 新增、编辑 -->
					<form-edit v-if="formEditVisible" ref="formEdit" :leftTreeData="leftTreesimple" @refreshData="queryList"></form-edit>
					<!-- 详情 -->
					<form-info v-if="formInfoVisible" ref="formInfo"></form-info>
				</div>
			</el-col>
		</el-row>
	</div>
</template>
<script>
import { cmsarticleAuditPage, leftTreeList } from "@/api/cms/cmsarticle.js"
import { viewTableList } from "@/api/public.api.js"
import FormEdit from "./cmsarticle-audit-edit"
import FormInfo from "./cmsarticle-info"
import FortressPagination from "@/components/fortress-pagination.vue"
import { enumList } from "@/api/public.api.js"
export default {
	data() {
		return {
			leftTreeHeight: 0,
			leftTreeFilterText: "",
			parentShow: false,
			tableData: [],
			leftTreeData: [],
			leftTreesimple: [],
			defaultProps: {
				children: "children",
				label: function treeNameHandle(data) {
					let c = data.category == 1 ? "栏目" : data.category == 2 ? "封面" : data.category == 3 ? "外链" : ""
					return data.name + (c ? "|(" + c + ")" : "")
				},
			},
			sleLeftTreeNode: {},
			sleLeftTreeId: "",
			sleLeftTreeName: "",
			formEditVisible: false,
			formInfoVisible: false,
			queryForm: {
				id: "",
				title: "",
				author: "",
				keywords: "",
				publisher: "",
				status: "",
			},
			page: {
				current: 1,
				size: 10,
				total: 0,
			},
			collapse: {
				icon: "el-icon-arrow-down el-icon--right",
				label: "展开",
				flag: false,
			},
			tableList: [],
			tableShowList: [],
			ArticleStatus_cmsList: [],
		}
	},
	components: {
		"form-edit": FormEdit,
		"form-info": FormInfo,
		pagination: FortressPagination,
	},
	created() {
		this.leftTreeHeight = window.innerHeight * 0.8
		this.queryEnumList()
		this.queryLeftTreeList()
		this.initTableList()
		this.queryList()
	},
	watch: {
		leftTreeFilterText(val) {
			this.$refs.tree.filter(val)
		},
	},
	methods: {
		queryEnumList() {
			this.ArticleStatus_cmsList = []
			enumList("ArticleStatus", "cms").then(resp => {
				if (resp.code == 0) {
					resp.data.forEach(item => {
						if (item.code != 0) {
							this.ArticleStatus_cmsList.push(item)
						}
					})
				}
			})
		},
		//查询左树数据
		queryLeftTreeList() {
			this.leftTreeData = [{ id: -1, name: "全部" }]
			leftTreeList().then(resp => {
				if (resp.code == 0) {
					this.leftTreesimple = resp.data
					this.leftTreeData = this.leftTreeData.concat(this.leftTreesimple)
				} else {
					this.$msg({
						message: resp.msg,
						type: "error",
					})
				}
			})
		},
		leftTreeFilterNode(value, data) {
			if (!value) return true
			return data.name.indexOf(value) !== -1
		},
		//点选左侧树
		chooseLeftTree(data) {
			if (data.id == -1) {
				this.sleLeftTreeNode = {}
				this.sleLeftTreeId = ""
				this.sleLeftTreeName = ""
				this.queryRightTable("")
			} else {
				this.sleLeftTreeNode = data
				this.sleLeftTreeId = data.id
				this.sleLeftTreeName = data.name
				this.queryRightTable(data.id)
			}
		},
		//点击左树筛选右侧表格数据
		queryRightTable(sleLeftTreeId) {
			this.queryForm.channelId = sleLeftTreeId
			this.queryList()
		},
		refresh() {
			this.tableData = []
			this.queryList({ current: 1 })
		},
		//查询表格数据
		queryList(page) {
			this.parentShow = true
			if (page) {
				this.page.current = page.current ? page.current : this.page.current
				this.page.size = page.size ? page.size : this.page.size
			}
			this.queryForm.current = this.page.current
			this.queryForm.size = this.page.size
			cmsarticleAuditPage(this.queryForm).then(resp => {
				if (resp.code == 0) {
					this.tableData = resp.data.records
					this.page.total = resp.data.total
					//查询页大于总页数，重新查询
					let cu =
						this.page.total % this.page.size == 0
							? parseInt(this.page.total / this.page.size)
							: parseInt(this.page.total / this.page.size + 1)
					if (cu > 0 && this.page.current > cu) {
						this.queryList({ current: cu })
					}
				} else {
					this.$msg({
						message: resp.msg,
						type: "error",
					})
				}
				this.parentShow = false
			})
		},
		//打开编辑窗口
		handleEdit(row) {
			//新增
			if (!row) {
				if (!this.sleLeftTreeId || this.sleLeftTreeNode.category != 1) {
					this.$msg({
						message: "请选择列表类型栏目",
						type: "error",
					})
					return
				}
			}
			this.formEditVisible = true
			this.$nextTick(() => {
				if (row) {
					this.$refs.formEdit.init(row.id, row.channelId)
				} else {
					this.$refs.formEdit.init(undefined, this.sleLeftTreeId, this.sleLeftTreeName)
				}
			})
		},
		//打开详情窗口
		handleInfo(id) {
			this.formInfoVisible = true
			this.$nextTick(() => {
				this.$refs.formInfo.init(id)
			})
		},
		//重置查询框
		resetQueryForm() {
			this.queryForm = {
				id: "",
				title: "",
				author: "",
				keywords: "",
				publisher: "",
				status: "",
				channelId: this.sleLeftTreeId,
			}
		},
		//切换查询条件收缩框
		handleCollapseState() {
			this.collapse.flag = !this.collapse.flag
			if (this.collapse.flag) {
				this.collapse.icon = "el-icon-arrow-up el-icon--right"
				this.collapse.label = "收起"
			} else {
				this.collapse.icon = "el-icon-arrow-down el-icon--right"
				this.collapse.label = "展开"
			}
		},
		//视图表格列表初始化
		initTableList() {
			viewTableList("cms_article").then(resp => {
				if (resp.code == 0) {
					this.tableList = resp.data
					this.tableList.forEach(item => {
						this.tableShowList.push(item.propName)
					})
				}
			})
		},
		//状态格式化返回
		statusFmt(row) {
			let name = ""
			if (this.ArticleStatus_cmsList) {
				this.ArticleStatus_cmsList.forEach(item => {
					if (item.code == row.status) {
						name = item.name
					}
				})
			}
			return name
		},
		//可见字段excel导出
		handleExport() {
			if (!this.tableShowList || this.tableShowList.length < 1) {
				this.$msg({
					message: "请选择要导出的列",
					type: "error",
				})
				return
			}
			let colNum = 1
			let headerList = []
			this.tableShowList.forEach(item => {
				let nameData = this.tableList.find(item2 => {
					return item2.propName == item
				})
				let name = ""
				if (nameData && nameData.propDesc) {
					name = nameData.propDesc
				} else {
					name = "未定义字段" + colNum++
				}
				headerList.push({ name: name, code: item })
			})
			cmsarticleDynamicExport({ headerList: headerList, dto: this.queryForm })
		},
	},
}
</script>
<style scoped>
.padding10 {
	padding: 10px 20px;
	background-color: #fff;
	/* max-height: 600px; */
	overflow: auto;
	border-radius: 4px;
	box-shadow: 0 1px 2px 0 rgb(0 0 0 / 5%);
}
.tree {
	height: 600px;
	overflow: auto;
}
</style>
